<template>
    <div>
    <!-- 表格 -->
    
                <!-- <el-popover placement="bottom-start" width="500" style="margin-right:10px;" trigger="click">
                      <el-form :inline="true" :model="search" label-width="110px" class="demo-ruleForm">
                          <el-form-item label="开始时间" style="margin-bottom: 0;">
                                <el-date-picker v-model="search.planStartTime" 
                                type="date" 
                                align="right"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd"></el-date-picker>
                            </el-form-item>
                            <el-form-item label="结束时间" style="margin-bottom: 0;">
                                    <el-date-picker v-model="search.planEndTime" 
                                    type="date" 
                                    align="right"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd"></el-date-picker>
                             </el-form-item>
                             <el-form-item label="创建人" style="margin-bottom: 0;">
                                    <el-select v-model="search.creator"  >
                                         <el-option v-for="item in usersData" :key="item.id" :value="item.id" :label="item.name"></el-option>
                                     </el-select> 
                             </el-form-item>
                             <el-form-item label="状态" style="margin-bottom: 0;">
                                    <el-select v-model="search.state"  >
                                         <el-option value=0 label="待提交" ></el-option>
                                         <el-option value=1 label="待审核" ></el-option>
                                         <el-option value=2 label="审核通过" ></el-option>
                                         <el-option value=3 label="审核不通过" ></el-option>
                                     </el-select> 
                             </el-form-item>
                            <el-button type="primary" @click="searchBtn">确认</el-button>
                            <el-button type="primary" @click="cleanSearch">重置</el-button>
                    </el-form>
                     <el-button slot="reference" type="primary" icon="el-icon-search">查询</el-button>
               </el-popover> -->

        <el-table :data="dataList" stripe border class="table-index" style="width: 100%;" :height="tableHeight" v-loading="loading">
            <el-table-column fixed type="index" label="*" sortable min-width="40"></el-table-column>
            <el-table-column prop="name" label="计划名称" sortable min-width="140"></el-table-column>
            <el-table-column prop="planStartTime" label="计划开始时间"  sortable  width="140"></el-table-column>
            <el-table-column prop="planEndTime" label="计划结束时间" sortable width="140"></el-table-column>
            <el-table-column prop="type" label="计划类型" sortable width="160" align="center">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.type===1" type="success">明细附后</el-tag>
                    <el-tag  type="danger"  v-else-if="scope.row.type===2">不清楚</el-tag>
                    <el-tag type="warning" v-else-if="scope.row.type===3">等待公司上级安排</el-tag>
                </template>
            </el-table-column>
             <el-table-column prop="state" label="审核" sortable width="100" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.state===2" class="el-icon-circle-check cl-success"></span>
                    <span v-else-if="scope.row.state===3" class="el-icon-circle-close cl-danger"></span>
                    <span  v-else-if="scope.row.state===1" class="cl-warning">审核中...</span>
                    <span v-else></span>
                </template>
            </el-table-column>
            <el-table-column  label="部门" sortable width="130">
                <template slot-scope="scope">
                    <div>{{scope.row.jyDept.deptName}}</div>
                </template>
            </el-table-column>
            <el-table-column prop="creatorName" label="创建人" sortable width="130"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" sortable  width="170"></el-table-column>
            <el-table-column fixed="right" label="操作" sortable align="center" min-width="75">
                <template slot-scope="scope">
                     <el-button @click="showPlanDetail(scope.row)" type="text" size="small">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
       <!-- 计划审核 -->
        <el-dialog :title="planDetailDialog.info.name" :visible.sync="planDetailDialog.open" width="1200px" center :close-on-click-modal="false">
            <h3 class="dialog-plate-title"><span>工作计划</span></h3>
            <el-form ref="form" :model="planDetailDialog.info" label-width="120px">
                <el-form-item label="计划名称" prop="name">
                    <el-input v-model="planDetailDialog.info.name" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="计划开始时间" prop="planStartTime">
                    <el-date-picker v-model="planDetailDialog.info.planStartTime" type="datetime" placeholder="请选择计划开始时间" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  :disabled="true"></el-date-picker>
                </el-form-item>
                <el-form-item label="计划结束时间" prop="planEndTime">
                    <el-date-picker v-model="planDetailDialog.info.planEndTime" type="datetime" placeholder="请选计划择结束时间" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  :disabled="true"></el-date-picker>
                </el-form-item>
                <el-form-item label="计划类型" prop="type">
                    <el-radio-group v-model="planDetailDialog.info.type"  :disabled="true">
                        <el-radio :label="1">明细附后</el-radio>
                        <el-radio :label="2">不清楚</el-radio>
                        <el-radio :label="3">等待公司上级安排</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div v-if="planDetailDialog.info.type===1">
                <h3 class="dialog-plate-title"><span>工作计划明细</span></h3>
                <el-table :data="planDetailDialog.list" stripe border class="table-index" style="width: 100%;">
                    <el-table-column fixed type="index" label="*" sortable min-width="40"></el-table-column>
                    <el-table-column prop="content" label="工作内容" sortable min-width="140"></el-table-column>
                    <el-table-column prop="type" label="属性"  sortable  width="100">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.type===1">项目性事务</el-tag>
                            <el-tag type="success" v-else-if="scope.row.type===2">例行事务</el-tag>
                            <el-tag type="warning" v-else-if="scope.row.type===3">临时性事务</el-tag>
                        </template>
                    </el-table-column>
                     <el-table-column label="投入资源" sortable  width="140">
                         <template slot-scope="scope">
                            <div v-if="scope.row.inResource">{{scope.row.inResource}}小时</div>
                            <div v-if="scope.row.inResoureOther">{{scope.row.inResoureOther}}</div>
                        </template>
                     </el-table-column>
                    <el-table-column prop="planFinish" label="计划完成时间" sortable  width="140"></el-table-column>
                    <el-table-column prop="result" label="达成结果" sortable min-width="130"></el-table-column>
                    <el-table-column  label="结果呈现形式"  sortable width="100">
                        <template slot-scope="scope">
                            <div v-for="item in scope.row.resultTypes" :key="item">
                                <el-tag size="mini"   v-if="item===1">软件平台</el-tag>
                                <el-tag size="mini"   v-else-if="item===2">纸质资料</el-tag>
                                <el-tag size="mini"  v-else-if="item===3">现场/实物</el-tag>
                                <el-tag size="mini"   v-else-if="item===4">经济价值：{{scope.row.resultTypeSum}}</el-tag>
                                <el-tag size="mini"   v-else-if="item===5">其他：{{scope.row.resultTypeOther}}</el-tag>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="remark" label="备注" sortable min-width="130" ></el-table-column>
                    <el-table-column prop="state" label="审核" sortable width="100" align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.state===2" class="el-icon-circle-check cl-success"></span>
                            <span v-else-if="scope.row.state===3" class="el-icon-circle-close cl-danger"></span>
                            <span  v-else-if="scope.row.state===1" class="cl-warning">审核中...</span>
                            <span v-else></span>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="审核操作" sortable align="center" min-width="100">
                        <template slot-scope="scope">
                            <el-button @click="itemChecked(2,scope.row)" type="text" size="small"><span class="cl-success" v-if="planDetailDialog.info.state===1">通过</span></el-button>
                            <el-button @click="itemChecked(3,scope.row)" type="text" size="small"><span class="cl-danger" v-if="planDetailDialog.info.state===1">不通过</span></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div>
                <h3 class="dialog-plate-title"><span>审核</span></h3>
                <el-form ref="form" :model="planDetailDialog.info" label-width="120px">
                    <el-form-item label="审核批注">
                        <el-input type="textarea" :rows="2" placeholder="请输入审核批注" v-model="planDetailDialog.info.approveResult"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer"  v-if="planDetailDialog.info.state===1">
                <div v-if="planDetailDialog.info.type>1">
                    <el-button @click="submitCheck(planDetailDialog.info,2)" type="primary" >通过</el-button>
                    <el-button @click="submitCheck(planDetailDialog.info,3)">不通过</el-button>
                </div>
                <div v-else>
                    <el-button @click="submitCheck(planDetailDialog.info)" type="primary">提交审核</el-button>
                </div>
            </div>
        </el-dialog>
      <el-dialog :title="copyDialog.name" :visible.sync="copyDialog.open" width="400px" center :close-on-click-modal="false">
               <el-form ref="form"   label-width="120px">
                   <el-form-item  label="抄送人" class="form-item-block text-center" >
                     <el-select v-model="copyDialog.user" multiple placeholder="请选择">
                            <el-option
                            v-for="item in usersData"
                            :key="item.id" :value="item.id" :label="item.name">
                            </el-option>
                        </el-select>
                    </el-form-item>
                   <el-form-item  class="form-item-block text-center">
                      <el-button type="primary" @click="onSubmitCopy()">确认</el-button>
                    </el-form-item>
               </el-form>
                
      </el-dialog>
        

  </div>
</template>
<script>
import workPlanApi from '@/axios/workPlanApi.js'
export default {
  name: "workPlan",
  data() {
    return {
        copyDialog:{
            name:'抄送名单',
            open:false,
            data:'',
            user:'',
        },
        usersData:[],
        search:{
                  planStartTime:'',
                  planEndTime:'',
                  state:'',
                  creator:'',
          },
        activeName:'1',
        dataList:[],
        loading:false,
        pagination:{
            currentPage: 1,
            pageSize: 10,
            total:0
        },
        planDetailDialog:{
            open:false,
            list:[],
            info:{}
        },
        tableHeight:(document.documentElement.clientHeight - 200)
    };
  },

  created() {
  },
  mounted(){
    this.getList();
     this.getUsersData();
  },
  methods: {
      onSubmitCopy(){
          let self = this;
          let tid=   self.copyDialog.data.id;
          let taskWorkPlanCcs=[]
          self.copyDialog.user.forEach(item => {
             let dataItem={
                userId:item,
                tid:tid
              }
              taskWorkPlanCcs.push(dataItem)
          });
          workPlanApi.taskWorkPlanCcInsert(tid,taskWorkPlanCcs ).then(res=>{
              self.$message.success('成功')
              self.copyDialog.open=false;
          })
      },
      showCopyDialog( row){
        let self = this;
        self.copyDialog.open=true;
        self.copyDialog.data=row;
        //根据tid 去查询有哪些选择了的然后去回显到select中
        workPlanApi.taskWorkPlanCcSelect(row.id).then(res=>{
               let data=[]
               res.content.forEach(item=>{
                data.push( item.userId)  
               })
              self.copyDialog.user= data;
        })
      },
      cleanSearch(){
       let self = this;
       self.search.planStartTime='';
       self.search.planEndTime='';
       self.search.creator='';
       self.search.state='';
       self.searchBtn();
      },
        getUsersData() {
                let _this = this;
                this.$http({
                    url: '/api/adscm/operation/taskManagerAnalysis/queryUser?tokenId=' + _this.tokenId,
                    method: 'post',
                    headers: {'X-Requested-With': 'XMLHttpRequest'},
                }).then(function (res) {
                    if (res.data.statusCode == 200) {
                        _this.usersData = res.data.content;
                    } else {
                        _this.$message.error(res.data.desc);
                    }
                }).catch(function (catchres) {
                    _this.$message.error("加载失败！请重新加载...");
                })
      },
    searchBtn(){
     let self = this;
     self.loading = true
      let postData={
            currentPage:self.pagination.currentPage,
            pageSize:self.pagination.pageSize,
            state:self.search.state,
            planStartTime:self.search.planStartTime,
            planEndTime:self.search.planEndTime,
            creator:self.search.creator,
        }
         workPlanApi.selectCc(postData).then(res=>{
            self.loading = false
            self.dataList=res.content.records;
            self.pagination.total=res.content.total;
        },error=>{
           self.loading = false
        })
    },
      /***获取计划列表 */
    getList(){
        let self = this;
        self.loading = true
        let postData={
            currentPage:self.pagination.currentPage,
            pageSize:self.pagination.pageSize,
            state:self.activeName==='0'?null:self.activeName
        }
        workPlanApi.selectCc(postData).then(res=>{
            self.loading = false
            self.dataList=res.content.records;
            self.pagination.total=res.content.total;
        },error=>{
           self.loading = false
        })
    },
    handleClick(tab, event){
        this.getList()
    },
    /**获取工作明细列表*/
     getPlanDetail(){
        let self = this;
        workPlanApi.getPlanDetailList(self.planDetailDialog.info.id).then(res=>{
            self.planDetailDialog.list=res.content;
        })
    },
    /**点击审核*/
    showPlanDetail(row){
        let self = this;
        self.planDetailDialog.open = true;
        self.planDetailDialog.info = {...row};
        self.getPlanDetail();
    },
    /**单个审核*/
    itemChecked(state,row){
        let self = this;
        let data = {...row}
        data.state = state
        workPlanApi.insertUpdatePlanDetail('update',data).then(res=>{
            self.$message.success('审核成功');
            self.getPlanDetail();
        })
    },
    submitCheck(data,value){
        let self = this;
        if(self.planDetailDialog.info.type===1){
            if(self.planDetailDialog.list.findIndex(item=>item.state===1)!==-1){
                self.$message.error('还有工作明细没有审核')
                return
            }
            data.state= (self.planDetailDialog.list.findIndex(item=>item.state===3)!==-1)?3:2;
        }else{
            data.state=value;
        }
       workPlanApi.insertUpdateWorkPlan('update',data).then(res=>{
           self.$message.success('提交成功');
           self.planDetailDialog.open = false;
           self.getList();
       })
    },
    handleSizeChange(size){
        this.pagination.pageSize = size;
        this.getList()
    },
    handleCurrentChange(current){
        this.pagination.currentPage = current;
         this.getList()
    }
  }
}
</script>
<style scoped>
</style>
